<template>
  <div class="box">
    <div class="login_box">
      <el-form :model="registerForm" ref="registerForm" :rules="registerFormRules">
        <h4>注册</h4>
        <div class="inputArea">
          <el-form-item prop="username">
            <el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="密码" prefix-icon="el-icon-lock" show-password v-model="registerForm.password"
              @keyup.enter.native="enterRegister()"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input placeholder="邮箱" prefix-icon="el-icon-s-promotion" v-model="registerForm.email"></el-input>
          </el-form-item>
          <el-form-item prop="code" class="verification">
            <el-input placeholder="验证码" v-model="registerForm.code" style="width:60%; float: left"></el-input>
            <el-button type="text" style="width: 37%; margin-left: 10px" @click="getCode()" :disabled="disabled">{{flag ? message : message1 + times + 's'}}
            </el-button>
          </el-form-item>
        </div>
        <div class="btnArea">
          <el-button type="text" @click="toregister">注册</el-button>
          <el-button type="text" @click="back">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: true,
      times: 30,
      disabled: false,
      message: '发送验证码',
      message1: '重新发送',
      registerForm: {
        username: '',
        password: '',
        email: '',
        code: ''
      },
      registerFormRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 0, max: 6, message: '密码长度不能超过 6 位', trigger: 'blur'}
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur'},
          { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { min: 4, max: 4, message: '长度是 4 个数字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toregister () {
      this.$refs.registerForm.validate(valid => {
        if (!valid) return
        this.$axios.post('register', this.registerForm)
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.message)
              this.$refs.registerForm.resetFields()
            } else {
              this.$message.success(response.data.message)
              this.$router.push('/login')
            }
          })
      })
    },
    back () {
      this.$router.go(-1)
    },
    enterRegister () {
      this.toregister()
    },
    getCode() {
      var valiSome = ['username', 'email']
      var flag = true
      valiSome.forEach((item, key) => {
        this.$refs.registerForm.validateField(item, (val) => {
          if (val) return flag = false
        })
      })

      if (flag) {
        this.disabled = true
        this.flag = false
        this.getTime()
        this.$axios.post('email', this.registerForm).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.$message.error('信息有误')
      }
    },
    getTime() {
      this.timer = setInterval(() => {
        this.times--
        if (this.times === 0) {
          this.times = 30
          this.disabled = false
          this.flag = true
          clearInterval(this.timer)
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
    background: linear-gradient(120deg,rgb(6,129,140) 0%,rgb(16,70,115) 100%) no-repeat;
}

.login_box {
    width: 400px;
    height: 300px;
    margin-top: 10%;
}

.box .login_box h4 {
    color: #eee;
    font-weight: 100;
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.inputArea>>>.el-input__inner {
    outline: none;
    color: #eee;
    background-color: rgba(0,0,0,20%);
    border-radius: 2.5rem;
    border: none;
}

.inputArea>>>.el-input__inner::placeholder {
    color: #bbb;
}

.inputArea>>>.el-input__inner:hover {
    background-color: rgba(0,0,0,30%);
}

.inputArea>>>.el-input__inner:focus {
    background-color: rgba(0,0,0,40%);
}

.btnArea {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.btnArea>>>.el-button.el-button--text,
.verification>>>.el-button.el-button--text {
    color: #eee;
    border: 1px solid #eee;
    border-radius: 2.5rem;
    width: 50%;
    transition: color .3s,background-color .3s;
}

.btnArea>>>.el-button.el-button--text:hover,
.verification>>>.el-button.el-button--text:hover {
    color: #333 !important;
    background-color: rgba(255,255,255,80%) !important;
}
</style>
